<template>
	<div>
<!--		<h1>工资管理页面</h1>-->
<!--		<el-container style="margin: 0">-->
<!--			<el-header style="overflow: hidden">-->
<!--				<h1 style="float: left">绩效计提</h1>-->
<!--				<div style="border: 1px red solid;float: right; width:1150px;height:58px">-->
<!--					{{bonus}}-->
<!--				</div>-->
<!--			</el-header>-->
<!--		</el-container>-->
		<h1>工资管理</h1>
		<el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: left;margin: 10px 0">
			<el-form-item >
				<el-input v-model="formInline.yg_name" placeholder="员工姓名"></el-input>
			</el-form-item>
			<el-form-item >
				<el-input v-model="formInline.yg_number" placeholder="员工编号"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="cz">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table
				:data="istrue?gzglDada:table"
				border
				style="width:75%;text-align: center;margin: auto">
			<el-table-column prop="number" label="员工编号"
							 width>
			</el-table-column>
			<el-table-column prop="name" label="员工姓名"
							 width>
			</el-table-column>
			<el-table-column prop="base_salary" label="基本工资"
							 width>
			</el-table-column>
			<el-table-column prop="bonus" label="绩效奖金"
							 width>
			</el-table-column>
			<el-table-column prop="wages" label="奖惩工资"
							 width>
			</el-table-column>
			<el-table-column prop="caozuo" label="操作"
							 width>
				<template slot-scope="scope">
					<el-button size="mini" plain
							   @click="edit(scope.$index, scope.row)">修改</el-button>
					<el-button plain size="mini"
							   @click="tuisong1(scope.$index, scope.row)">推送</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div id="fenye">
			<el-pagination
					background
					layout="prev, pager, next"
					:total="currentData"
					:page-size="5"
					:pager-count="7"
					@current-change="changePage"
			>
			</el-pagination>
		</div>
<!--		===========修改员工工资=====-->
		<el-dialog
				:visible.sync="xiugai"
				width="30%"
		>
			<h1>员工工资修改</h1>
			<el-form ref="form" :model="form" label-width="100px" :rules="gongzixiiugai" >
				<el-form-item label="员工编号" prop="number">
					<el-input  :disabled="true" v-model.number="form.number">{{form.number}}</el-input >
				</el-form-item>
				<el-form-item label="员工姓名" >
					<el-link   v-model="form.name">{{form.name}}</el-link>
				</el-form-item>
				<el-form-item label="基本工资" prop="base_salary">
					<el-input  v-model.number="form.base_salary"></el-input>
				</el-form-item>
				<el-form-item label="绩效奖金" prop="bonus">
					<el-input v-model.number="form.bonus"></el-input>
				</el-form-item>
				<el-form-item label="奖惩工资" prop="wages">
					<el-input  v-model.number="form.wages"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
    <el-button @click="xiugai = false">取 消</el-button>
    <el-button type="primary" @click="quedingxiugai('form')">确定修改</el-button>
            </span>
		</el-dialog>
<!--		==========推送-->
		<el-dialog
				:visible.sync="tuisong"
				width="30%"
		>
			<h1 >信息是否推送到{{tel}}手机？？？</h1>
			<span slot="footer" class="dialog-footer">
    <el-button @click="tuisong = false">取 消</el-button>
    <el-button type="primary" @click="quedingtuisong">确定推送</el-button>
            </span>
		</el-dialog>
	</div>
</template>
<script>
	import {mapActions} from 'vuex'
	export default {
		data() {
			return {
				currentPage: 1,
				formInline: {        //按条件查询
					name: '',
					number: "",
				},
				form: {
					name: '',
					number: "",
					base_salary: '',
					bonus: '',
					wages:'',
				},
				gongzixiiugai: {
					base_salary: [
						{required: true, message: '请输入基本工资', trigger: 'blur'},
						{type: 'number', message: '基本工资必须为数字'}
					],
					bonus: [
						{required: true, message: '请输入绩效奖金', trigger: 'blur'},
						{type: 'number', message: '绩效奖金必须为数字'}
					],
					wages: [
						{required: true, message: '请输入奖惩工资', trigger: 'blur'},
						{type: 'number', message: '奖惩工资必须为数字'}
					],
				},
				xiugai: false,
				tuisong: false,
				tel: '',
				istrue:true,
				table:[],
			}
		},
		created() {
			this.DataA(1).then(res => {

			})
			this.DataCount().then(res => {

	})
	},
		computed: {
			gzglDada() {
				return	this.$store.state.gzgl.gzglDada

			},
			currentData() {
				return this.$store.state.gzgl.currentData
			},
		},
			methods: {
				...mapActions(['DataA', 'DataCount']),
				changePage(val) {      //分页
					// console.log(val)
					this.DataA(val)
				},
				onSubmit() {   //查
					this.$axios({
						url: '/mgrsite/salaryController/selectSalaryData',
						method: 'post',
						data: {
							name: this.formInline.yg_name,
							number: this.formInline.yg_number
						}
					}).then(res => {
						console.log(res)
						if (res.data.code ==='200') {
							this.istrue=false
							this.table=res.data.data
						} else if (res.data.code === '400') {
							this.$message.error('查找失败！');
						}
					})
				},
				edit(index, row) {
					// console.log(row.name)
					this.xiugai = !this.xiugai
					this.form.name = row.name
					this.form.number = row.number
					this.form.base_salary = row.base_salary
					this.form.bonus = row.bonus
					this.form.wages = row.wages
				},
				quedingxiugai(formName) {                          //改
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.$confirm('是否修改？', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
								this.$axios({
									url: '/mgrsite/salaryController/updateSalary',
									method: 'post',
									data: {
										number: this.form.number,
										base_salary: this.form.base_salary,
										bonus: this.form.bonus,
										wages: this.form.wages
									},
								}).then(res => {
									this.xiugai = !this.xiugai
									// console.log(res)
									if (res.data.code ==='200') {
										this.$message({
											type: 'success',
											message: '修改成功!'
										});
										this.istrue=true
										this.DataA()
										// this.DataCount([0,5])
									} else if (res.data.code === '400') {
										this.$message.error('修改失败！');
									}
								})
							});
						} else {
							this.$message.error('输入值有误！');
						}
					});
				},
                cz(){
                    this.istrue=true
                    this.DataA()
                    this.formInline.yg_name=''
                    this.formInline.yg_number=''
                },
				tuisong1(index, row) {        //推送
					this.tuisong = !this.tuisong
					console.log(row.tel)
					this.tel = row.tel
				},
				quedingtuisong() {
					this.$message('推送成功');
					this.tuisong = !this.tuisong
				}
			}
		}

</script>